<template>
	<view class="container">
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<template #top>
				<view class="container-tabs">
					<view class="container-tabs-title" v-for="(item, index) of tabs" :key="index"
						@click="changeTabs(item.value, index)">
						<text :class="{black: currentIndex === index}">{{ item.name }}</text>
					</view>
				</view>
			</template>

			<view class="container-box" v-for="(item, index) of dataList" :key="index">
				<view class="container-box-card" @click="jumt(item)">
					<view class="container-box-card-head">
						<view class="container-box-card-head-num">
							订单号: {{ item.order_no }}
						</view>
						<view class="container-box-card-head-status">
							{{ item.order_status_name }}
						</view>
					</view>

					<view class="container-box-card-main" v-for="(son, index) of item.order_goods" :key="index">
						<image :src="'https://kx.taipingkeji.com/' + son.sku_image" mode="aspectFill"></image>
						<view class="container-box-card-main-info">
							<view class="container-box-card-main-info-h1">
								<view>{{ son.sku_name }}</view>
								<view>&yen;{{ son.goods_money }}</view>
							</view>
							<view class="container-box-card-main-info-h2">
								<!-- <view>黑色；xl</view> -->
								<view>×{{ son.num }}</view>
							</view>
						</view>
					</view>
					<view class="container-box-all">
						<view class="container-box-all-text">共{{ item.order_goods.length }}件商品</view>
						<view class="container-box-all-money">实付款:&yen;{{item.order_money}}</view>
					</view>

					<view class="container-box-footer" v-if="item.order_status === 0">
						<view class="container-box-footer-left">
							<image src="@/static/zhon.png" mode="aspectFill"></image>
							<!-- <view >  剩余时间：12:36:06</view> -->
							剩余时间：<u-count-down :time="15 * 60 * 60 * 1000" format="HH:mm:ss" autoStart
								millisecond></u-count-down>
						</view>
						<view class="container-box-footer-right">
							<view class="container-box-footer-right-btn" 
							 @click.stop="closeOrder(item)">
							 关闭订单
							 </view>
							<view class="container-box-footer-right-btn orgin">支付</view>
						</view>
					</view>
					
				<view class="container-box-footer-right" style="padding: 10rpx 20rpx 20rpx 0;" v-if="item.order_status === 1">
					<view class="container-box-footer-right-btn">退款</view>
				</view>

					<view class="container-box-footer-right" style="padding: 10rpx 20rpx 20rpx 0;"
						v-if="item.order_status === 3">
						<view class="container-box-footer-right-btn">查看物流</view>
						<view class="container-box-footer-right-btn">确认收货</view>
					</view>


					<view class="container-box-footer-right" style="padding: 10rpx 20rpx 20rpx 0;"
						v-if="item.order_status === 10">
						<view class="container-box-footer-right-btn">售后详情</view>
						<view class="container-box-footer-right-btn">删除记录</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import request from "@/api/request.js"
	export default {
		data() {
			return {
				dataList: [],
				token: '',
				orderListDto: {
					page: 1,
					page_size: 10,
					token: '',
					order_status: 'all'
				},
				currentIndex: 0,
				tabs: [{
						name: '全部',
						value: 'all'
					},
					{
						name: '待付款',
						value: "waitpay",
					},
					{
						name: '待发货',
						value: "waitsend"
					},
					{
						name: '待收货',
						value: "waitconfirm"
					},
					{
						name: '退款/售后',
						value: "waitrate"
					}
				]
			}
		},
		onLoad() {
			this.token = uni.getStorageSync('token')
		},
		methods: {
			closeOrder(item){
			  uni.showLoading({
			  	title: '加载中...'
			  })
			  const paras = {
				token: this.token,
				order_id: item.order_id
			  }
			  request({
			  	url: '/kx/ShopOrder/close',
			  	data: paras,
			  	method: 'POST',
			  	successCb(res) {
			  		uni.hideLoading()
					uni.$u.toast('关闭成功')
			  	},
			  	failCb() {
			  		uni.hideLoading()
					uni.$u.toast('关闭失败')
			  	}
			  })	  
			},
			queryList(page, page_size) {
				uni.showLoading({
					title: '加载中...'
				})
				const that = this
				this.orderListDto.page = page
				this.orderListDto.token = this.token
				this.orderListDto.page_size = page_size
				request({
					url: '/kx/ShopOrder/orderList',
					data: this.orderListDto,
					method: 'POST',
					successCb(res) {
						uni.hideLoading()
						res.data.list.forEach(item => {
							item.order_status_action = JSON.parse(item.order_status_action)
						})
						console.info(res.data.list)
						that.$refs.paging.complete(res.data.list);
					},
					failCb() {
						uni.hideLoading()
						that.$refs.paging.complete(false);
					}
				})
			},
			changeTabs(value, index) {
				this.orderListDto.order_status = value
				this.currentIndex = index
				this.$refs.paging.reload()
			},
			jumt(item) {
				uni.navigateTo({
					url: `/pagesA/orderDetail/index?orderNo=${item.order_no}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.black {
		color: #3D3D3D;
	}

	.orgin {
		background: #FF8732;
		color: #fff !important;
		border: unset !important;
		height: 47rpx !important;
		line-height: 47rpx !important;
	}

	.container {
		background: #F3F3F3;
		min-height: 100vh;

		&-tabs {
			display: flex;
			justify-content: space-around;
			padding: 20rpx 0;

			&-title {
				color: #989898;
				font-size: 28rpx;
				font-weight: 500;
			}
		}

		&-box {
			margin: 20rpx 40rpx;

			&-footer {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10rpx 20rpx;

				&-left {
					display: flex;
					align-items: center;
					padding: 0 20rpx;
					font-size: 24rpx;
					color: #989898;

					image {
						width: 26rpx;
						height: 26rpx;
						background-size: 100%;
						margin-right: 10rpx;
					}
				}

				&-right {
					display: flex;
					justify-content: flex-end;

					&-btn {
						width: 130rpx;
						height: 42rpx;
						line-height: 42rpx;
						text-align: center;
						border-radius: 50rpx;
						border: 1px solid #000;
						font-size: 24rpx;
						color: #3D3D3D;
						margin: 0 10rpx;
					}
				}
			}

			&-all {
				display: flex;
				margin: 10rpx 30rpx;
				background: #F3F3F3;
				font-size: 24rpx;
				padding: 10rpx 20rpx;
				border-radius: 10rpx;
				color: #3D3D3D;

				&-text {
					flex: 1;
				}
			}

			&-card {
				width: 670rpx;
				// height: 356rpx;
				background: #FFFFFF;
				border-radius: 20rpx;

				&-head {
					display: flex;
					padding: 20rpx;

					&-num {
						font-size: 24rpx;
						color: #3D3D3D;
						flex: 1;
					}

					&-status {
						color: #FF8732;
						font-size: 24rpx;
					}
				}

				&-main {
					display: flex;
					padding: 0 20rpx;
					margin: 10rpx 0;

					image {
						width: 120rpx;
						height: 120rpx;
						background-size: 100%;
						flex-shrink: 0;
					}

					&-info {
						&-h1 {
							display: flex;

							view {
								color: #3D3D3D;

								&:nth-child(1) {
									font-size: 24rpx;
									padding: 0 20rpx;
								}

								&:nth-child(2) {
									font-size: 24rpx;
								}
							}
						}

						&-h2 {
							display: flex;
							padding: 10rpx 20rpx;

							view {
								display: flex;
								color: #989898;

								&:nth-child(1) {
									font-size: 24rpx;
									flex: 1;
								}

								&:nth-child(2) {
									font-size: 24rpx;
								}
							}
						}
					}
				}
			}
		}
	}
</style>